<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<script type="text/javascript" src="<s:url value="/js/jquery/jquery.collapse.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/protocol/vendor.js"/>"></script>

<br />
<h5>GLOBAL VENDOR SELECTION</h5>
<s:if test="!list.isEmpty()">

    <div id="table_content">
        <table>
            <thead>
            <tr>
                <th>Country</th>
                <th>Type</th>
                <th>Vendor Name</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tbody id="listOfVendors">
            <s:iterator value="list" var="x">
            <tr>
                <th><s:property value="countriesForVendor"/></th>
                <th><s:property value="type.descripcion"/></th>
                <th><s:property value="name"/></th>
                <th>
                    <s:form method="POST">
                        <s:url value="/images/edit.png" id="imageEdit"/>
                        <s:hidden value="%{id}" name="vendor.id"/>

                        <s:submit type="image" src="%{imageEdit}" cssStyle="width: 20px;height: 20px;" value="Edit"  ></s:submit>
                    </s:form>
                </th>
            </tr>
            </s:iterator>

            <tbody>
        </table>
    </div>
</s:if>

<s:form theme="simple" style="width: 100%;">
    <table id="pic_table" class="tableFilter">
        <tbody>

            <%--URLs--%>
            <s:url var="searchVendor" action="getVendorByName"  namespace="/Directories/CentralVendor"/>

            <tr>
                <td><div class="div_padding"></div></td>
                <td></td>
            </tr>

            <tr>
                <td><label>Category</label></td>
                <td>
                    <select disabled="disabled">
                        <option value="Central">Central</option>
                    </select>

                </td>
            </tr>

            <tr>
                <td>
                    <label>Type</label>
                </td>
                <td>
                    <s:select name="vendor.type.id" value="%{vendor.type.id}"
                              headerKey="" headerValue="Choose a type"
                              list="vendorTypes"
                              listKey="id"
                              listValue="descripcion"
                              theme="simple"
                            >
                    </s:select>
                </td>
            </tr>

            <tr>
                <td>
                    <label>Vendor Name</label>
                </td>
                <td>
                    <!--It Sends SITE's ID to Server-->
                    <s:textfield theme="simple"
                                 name="vendor.id"
                                 id="vendorId" readonly="true" cssClass="load_hidden"/>

                    <!--search field for SITES-->
                    <s:textfield theme="simple" id="searchVendor" name="vendor.name" value="%{vendor.name}"/>
                    <s:a href="#" onclick="searchVendors(
                    $('#searchVendor').val(),$('#main_vendor_type_id').val(),'%{searchVendor}');"
                         theme="simple" >
                        <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>

                    <label id="labelRequiredVendor" style="color: red">*</label>

                </td>
            </tr>

            <tr>
                <td><div class="div_padding"></div></td>
                <td></td>
            </tr>

            <tr>
                <td>
                    <label>Countries</label>
                </td>
                <td>
                    <s:select label="Countries" name="chosenCountries" id="countries" multiple="true"
                              headerKey="-1" headerValue="Choose Countries"
                              list="countries"
                              listKey="id"
                              listValue="country"
                              value="%{chosenCountries}"/>
                </td>
            </tr>

            <tr>
                <td><div class="div_padding"></div></td>
                <td></td>
            </tr>

            <tr>
                <td>
                    <label>Primary Contact Person Name</label>
                </td>
                <td>
                    <s:textfield name="vendor.contactPerson.name" value="%{vendor.contactPerson.name}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td>
                    <label>Primary Contact Person Email</label>
                </td>
                <td>
                    <s:textfield name="vendor.contactPerson.email" value="%{vendor.contactPerson.email}" theme="simple" />
                </td>
            </tr>

            <tr><div id="div_">Country Code + Area Code + Local Number</div></tr>
            <tr>
                <td>
                    <label style="display: inline">Primary Contact Person Phone</label><img class="imgInfo" src="<s:url value="/images/info.png"/>"/>
                </td>
                <td>
                    <s:textfield name="vendor.contactPerson.phone" value="%{vendor.contactPerson.phone}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td>
                    <label>Primary Contact Person Fax</label>
                </td>
                <td>
                    <s:textfield name="vendor.contactPerson.fax" value="%{vendor.contactPerson.fax}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td><div class="div_padding"></div></td>
                <td></td>
            </tr>

            <tr>
                <td>
                    <label>Secondary Contact Person Name</label>
                </td>
                <td>
                    <s:textfield name="vendor.secondaryContactPerson.name" value="%{vendor.secondaryContactPerson.name}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td>
                    <label>Secondary Contact Person Email</label>
                </td>
                <td>
                    <s:textfield name="vendor.secondaryContactPerson.email" value="%{vendor.secondaryContactPerson.email}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td>
                    <label style="display: inline">Secondary Contact Person Phone</label><img class="imgInfo" src="<s:url value="/images/info.png"/>"/>
                </td>
                <td>
                    <s:textfield name="vendor.secondaryContactPerson.phone" value="%{vendor.secondaryContactPerson.phone}" theme="simple" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Secondary Contact Person Fax</label>
                </td>
                <td>
                    <s:textfield name="vendor.secondaryContactPerson.fax" value="%{vendor.secondaryContactPerson.fax}" theme="simple" />
                </td>
            </tr>

            <tr>
                <td><div class="div_padding"></div></td>
                <td></td>
            </tr>

        </tbody>

        <tbody>
            <tr>
                <td style="text-align: right;">
                    <s:submit value="Save" action="save" theme="simple" onclick="return validate()"/>
                </td>
                <td>
                    <s:submit value="Clear" action="main" onclick="$('#vendorId').val('');" theme="simple"/>
                </td>
            </tr>
        </tbody>

    </table>
</s:form>
    <script type="text/javascript">
    selectItemMenu("globalVendorSelection");

    function editExistentVendor(vendorId){
        var vendors = $('#listOfVendors').children();
        for( var i = 0; i < vendors.length; i++){
            var tr = vendors[i];
            var th = $(tr).children()[3];
            var form = $(th).children()[0];
            var form_input = $($(form).children()[0]).children()[0];
            if($(form_input).val() == vendorId){
                form.submit();
                break;
            }
        }
    }

    /*muestra collapses para la edicion*/
    function init(){
        $('#labelRequiredVendor').hide();
        if(!$.isEmptyObject($('#main_id_investigadorid').val())){
            loadSite();
        }
    }

    window.onload=init;

</script>